@extends('layouts.app')
@section('style')
    @parent
@endsection
@section('content')
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div id="success-info"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    用户列表
                </div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>邮箱</th>
                            <th>性别</th>
                            <th>头像</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="table-body">
                        @if(!empty($user))
                            @forelse($user as $val)
                                <tr data-id="{{$val->id}}">
                                    <td id="id">{{$val->id}}</td>
                                    <td id="name">{{$val->name}}</td>
                                    <td id="email">{{$val->email}}</td>
                                    <td id="sex">{{$val->sex}}</td>
                                    <td><img style="height: 50px;width: 50px;border-radius: 50%" src="{{asset('/uploads/'.$val->headpic)}}" alt=""></td>
                                    <td>{{$val->created_at}}</td>
                                    <td>{{$val->updated_at}}</td>
                                    <td>
                                        @can('edit user')
                                            <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#editUser">修改</button>
                                        @endcan
                                        @can('user rightManage')
                                            <button type="button" class="btn btn-info rightManage" data-toggle="modal" data-target="#rightManage">权限</button>
                                        @endcan
                                        @can('delete user')
                                            <button type="button" class="btn btn-danger delete" onclick="destroy({{$val->id}})">删除</button>
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                null
                            @endforelse
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
            {{$user->links()}}
        </div>
    </div>
    <!--editUser Modal -->
    <div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="editUser-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editUser-title">修改用户</h4>
                </div>
                <div class="modal-body">
                    <div class="volidate"></div>
                    <form id="edit-form">
                        <input type="hidden" class="form-control" id="id" placeholder="id" name="id">
                        <div class="form-group">
                            <label for="name">用户名</label>
                            <input type="text" class="form-control" id="name" placeholder="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" class="form-control" id="email" placeholder="email" name="email">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="edit">Edit</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!--RigtManage Modal -->
    <div class="modal fade" id="rightManage" tabindex="-1" role="dialog" aria-labelledby="rightManage-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="rightManage-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="volidate"></div>
                    <form id="manage-form">
                        <input type="hidden" class="form-control" id="id" placeholder="id" name="id">
                        <span class="label label-primary">角色列表</span>
                        @foreach($role as $val)
                            <label class="checkbox">
                                <input type="radio" name="chooseRole" id="{{$val->id}}" value="{{$val->id}}">{{$val->description}}
                            </label>
                            @forelse($val->permissions as $v)
                                <span class="label label-info" style="line-height: 2">{{$v->description}}</span>
                                @empty
                                <div class="alert alert-warning">暂无</div>
                            @endforelse
                        @endforeach
                        <br><br><span class="label label-success">其他权限</span>
                        <div id="otherPermissions">
                        @foreach($permission as $v)
                            <label class="checkbox-inline role-label"><input type="checkbox" value="{{$v->id}}">{{$v->description}}</label>
                        @endforeach
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="rightSave">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    @parent
    <script>
        $('#rightSave').click(function () {
            let ids=[];
            let user_id = $("#rightManage input[name='id'] ").val();
            let role_id = $("#rightManage input[name=chooseRole]:checked").val();
            $.each($('form#manage-form input:checkbox:checked'),function(){
                ids.push($(this).val())
            });
            $.ajax({
                type:'post',
                url:'user/rightStore',
                data:{ids:ids,user_id:user_id,role_id:role_id},
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'success','权限分配成功');
                    $('#rightManage').modal('hide');
                    console.log(data)
                },
                error:function(data){
                    console.log(data.responseJSON.message);
                    mesBox($('#editRight .volidate'),'danger',data.responseJSON.message);
                }
            });

        });
        $('#edit').click(function () {
            var id = $("#editUser input[ name='id' ] ").val();
            var name = $("#editUser input[ name='name' ] ").val();
            var email = $("#editUser input[ name='email' ] ").val();
            $.ajax({
                type:'put',
                url:'user/'+id,
                data:{name:name,email:email},
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'success','修改成功');
                    $('#editUser').modal('hide');
                    $('tr[data-id='+id+']').children('td#name').text(name);
                    $('tr[data-id='+id+']').children('td#email').text(email);
                },
                error:function(data){
                    var json=JSON.parse(data.responseText);
                    var msg ='';
                    $.each(json.errors, function(idx, obj) {
                        msg+=obj[0]+'</br>';
                    });
                    mesBox($('#editUser .volidate'),'danger',msg);
                }
            })
        });
        function destroy(id) {
            $.ajax({
                type:'delete',
                url:'user/'+id,
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'info','删除成功');
                    $('tr[data-id='+id+']').remove();
                    console.log(data)
                },
                error:function(data){
                    return false
                }
            })
        }
        function mesBox($el,info,mes) {
            $el.html('<div class="alert alert-'+info+' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert"' +'aria-hidden="true">' +
                '                &times;' +
                '            </button>'+mes+'</div>')
        }
        $(function () {
            $(document).on('click','button.edit',function () {
                let id = $(this).parent().siblings('td#id').text();
                $.ajax({
                    type:'get',
                    url:'user/'+id+'/edit',
                    cache: false,
                    success:function(data){
                        $("#editUser input[ name='id' ] ").val(data.user.id);
                        $("#editUser input[ name='name' ] ").val(data.user.name);
                        $("#editUser input[ name='email' ] ").val(data.user.email);
                    },
                    error:function(data){
                        return false
                    }
                });
            });
            $(document).on('click','button.rightManage',function (){
                let id = $(this).parent().siblings('td#id').text();
                $("#rightManage input[ name='id' ] ").val(id);
                $.ajax({
                    type:'post',
                    url:'user/rightEdit',
                    data:{id:id},
                    cache: false,
                    success:function(data){
                        var ids = [];
                        $.each(data.permissions,function (i,n) {
                            ids.push(parseInt(n.id));
                        });
                        otherPermissions(data.diff);
                        $('#otherPermissions input[type=checkbox]').each(function () {
                            var v = parseInt($(this).val());
                            if(ids.includes(v)){
                                $(this).prop("checked",true);
                            }else {
                                $(this).prop('checked',false);
                            }
                        });
                        $('#rightManage input[name=chooseRole]').each(function () {
                            var v = parseInt($(this).val());
                            if(v===parseInt(data.role_id)){
                                $(this).prop("checked",true);
                            }else {
                                $(this).prop('checked',false);
                            }
                        });
                    },
                    error:function(data){
                        return false
                    }
                });
            });
            $('input[type=radio][name=chooseRole]').change(function () {
                let id = $(this).val();
                console.log(id);
                $.ajax({
                    type:'post',
                    url:'user/changePermission',
                    data:{id:id},
                    cache: false,
                    success:function(data){
                        otherPermissions(data);
                    },
                    error:function(data){
                        return false
                    }
                });
            });
            function otherPermissions(data) {
                let html='';
                $.each(data,function (i,n) {
                    html+='<label class="checkbox-inline role-label"><input type="checkbox" value="'+n.id+'">'+n.description+'</label>'
                });
                if(html.length>0&&html!=''){
                    $('#otherPermissions').html(html);
                }else{
                    $('#otherPermissions').html('<div class="alert alert-warning">暂无</div>');
                }

            }
        });
    </script>
@endsection
